<template>
	<view class="login-bg">
		<view class="login-view">
			<view class="fontSize-30 color-000 margin-bottom30">
				欢迎使用小可爱配送
			</view>
			<view class="fontSize-15 color-000 margin-bottom30">请填写您的账号进行登录</view>
			<view class="flex-justAliCenter-column margin-bottom50">
				<view class="input-view margin-bottom50">
					<input type="number" maxlength="11" v-model="mobile" placeholder-style="color:#999999;" placeholder="请输入手机号码" />
				</view>
				<view class="input-view margin-bottom50">
					<input type="password" v-model="password" placeholder-style="color:#999999;" placeholder="请输入登录密码" />
				</view>
				<view class="login-btn-view flex-center margin-bottom50" @click="submitLogin">登录</view>
				
				<view class="flex-center">
					<!-- <view class="fontSize-15 color-fff" @click="gotoCodeLogin()">验证码登录</view>
					<view class="login-icon"></view> -->
					<view class="fontSize-15 color-999" @click="goToRegister">前往注册</view>
				</view>
				<!-- 隐私协议 -->
				<view class="flex-alignItems-center margin-top50">
					<view class="margin-right20" @click="handleSelect">
						<image class="img-38" v-if="isSelect" src="../../static/images/checked.png" mode=""></image>
						<image class="img-38" v-else src="../../static/images/check.png" mode=""></image>
					</view>
					<view class="fontSize-15 color-999">
						我已阅读并同意 
						<text style="color: #2A9C37;" @click="gotoUrl('用户协议')">《用户协议》</text>
						和 
						<text style="color: #2A9C37;" @click="gotoUrl('隐私政策')">《隐私政策》</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile:'', // 账号
				password:'', // 密码
				isSelect:false, // 是否已阅读
			}
		},
		methods: {
			goToRegister(){
				this.$tools.navigateTo('/pages/login/register')
			},
			// 跳转到验证码登录页面
			gotoCodeLogin(){
				this.$tools.navigateTo('/pages/login/code-login')
			},
			// 跳转到协议页面
			gotoUrl(value){
				this.$tools.navigateTo('/pages/login/agreement?status='+value)
			},
			// 选择选中
			handleSelect(){
				this.isSelect = !this.isSelect
			},
			// 提交登录
			async submitLogin(){
				if(!this.isSelect){
					return this.$tools.toast('请勾选并阅读用户协议')
				}
				if(!this.mobile){
					return this.$tools.toast('请输入登录账号')
				}
				if(!this.password){
					return this.$tools.toast('请输入登录密码')
				}
				let res = await this.$http.post(this.$api.login,
				{mobile:this.mobile,password:this.password})
				if (res.code == 1) {
					uni.setStorageSync('userinfo', res.data.userinfo)
					uni.setStorageSync('token', res.data.userinfo.token)
					this.$tools.toast('登录成功')
					this.$tools.switchTab('/pages/index/index',200)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-icon{
		width: 2px;
		height: 30rpx;
		background-color: #54B095;
		margin: 0 30rpx;
	}
	.login-view{
		position: absolute;
		bottom: 400rpx;
		left: 50rpx;
	}
	.login-btn-view{
		width: 600rpx;
		background-color: #2A9C37;
		padding: 30rpx;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 15px;
	}
	.input-view{
		width: 600rpx;
		background-color: #F7F7F7;
		padding: 30rpx;
		font-size: 15px;
		border-radius: 50rpx;
		color: #999999;
		// border: 1px solid #54B095;
	}
	.login-bg{
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #ffffff;
		// background: url("../../static/image/login-bg.png") no-repeat;
		// background-size: 100% 100%;
	}
</style>
